<template>
  <div class="box">
    <!-- 左 -->
    <vuedraggable
      class="wrapper"
      v-model="list"
      @start="aa((type = 1))"
      @end="bb"

    >
      <transition-group>
        <div v-for="(item, index) in list" :key="item.id" class="item">
          <div>
            <img :src="item.imgs" alt="" />

            <!-- {{item.name}} -->
          </div>
        </div>
      </transition-group>
    </vuedraggable>
    <!-- 右 -->
    <vuedraggable
      class="wrapper"
      v-model="list1"
      @start="aa((type = 2))"
      @end="bb"
    >
      <transition-group>
        <div v-for="(item, index) in list1" :key="item.id" class="item">
          <div>
            <img :src="item.imgs" alt="" />

            <!-- {{item.name}} -->
          </div>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";

export default {
  name: "HelloWorld",

  components: { vuedraggable },

  props: {},

  data() {
    return {
      list: [
        {
          id: 0,
          name: "赵云",
          imgs: "https://img0.baidu.com/it/u=4147990289,1188137584&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        },
        {
          id: 1,
          name: "关羽",
          imgs: "https://img2.baidu.com/it/u=1540885163,165576735&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1132",
        },
        {
          id: 2,
          name: "张飞",
          imgs: "https://img2.baidu.com/it/u=310270117,3797803983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=711",
        },
        {
          id: 3,
          name: "马超",
          imgs: "https://img0.baidu.com/it/u=3830325758,3584941488&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=454",
        },
        {
          id: 4,
          name: "黄忠",
          imgs: "https://img1.baidu.com/it/u=3478731737,341025983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=384",
        },
      ],
      list1: [],
      type: 1,
    };
  },



  methods: {
    aa(type) {
      this.type = type;
     
    },

    bb(e) {
         
      switch (this.type) {
        case 1:
          this.list1.push(this.list[e.newIndex]);
          let index = this.list.findIndex((r) => r == this.list[e.oldIndex]);

          this.list.splice(index, 1);
          break;
        case 2:
          this.list.push(this.list1[e.newIndex]);
          let index1 = this.list1.findIndex((r) => r == this.list1[e.oldIndex]);

          this.list1.splice(index1, 1);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
}
.wrapper {
  display: flex;

  /* justify-content: center; */

  width: 100%;
}

.item {
  /* width: 300px; */
  width: 100%;

  /* border: 1px solid blueviolet; */

  color: #ffffff;
  margin-bottom: 10px;
  /* display: flex; */
}
.item div {
  width: 300px;
  /* height: 50px; */
  /* background-color: #42b983; */
  /* border: 1px solid red; */
}
img {
  width: 150px;
  height: 100px;
  border-radius: 10px;
}
</style>
